﻿@{
    Layout = "~/Views/Manage/_Layout.cshtml";
    ViewBag.Title = ViewBag.Title + " - {Ace} Admin";
}

@RenderPage("~/Views/Manage/_Header.cshtml")
<div class="main-container" id="main-container">
    <script type="text/javascript">
        try { ace.settings.check( 'main-container', 'fixed' ) } catch ( e ) { }
    </script>

    <div class="main-container-inner">
        <a class="menu-toggler" id="menu-toggler" href="#">
            <span class="menu-text"></span>
        </a>

        @RenderPage("~/Views/Manage/_SideBar.cshtml")

        <div class="main-content">
            <div class="breadcrumbs" id="breadcrumbs">
                <script type="text/javascript">
                    try { ace.settings.check( 'breadcrumbs', 'fixed' ) } catch ( e ) { }
                </script>

                <ul class="breadcrumb">
                    <li>
                        <i class="icon-home home-icon"></i>
                        <a href="/manage">Manage</a>
                    </li>
                </ul>
                <!-- .breadcrumb -->

                <div class="nav-search" id="nav-search">
                    <form class="form-search">
                        <span class="input-icon">
                            <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
                            <i class="icon-search nav-search-icon"></i>
                        </span>
                    </form>
                </div>
                <!-- #nav-search -->
            </div>

            @RenderBody()
        </div>
        <!-- /.main-content -->

        <div class="ace-settings-container" id="ace-settings-container">
            <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
                <i class="icon-cog bigger-150"></i>
            </div>

            <div class="ace-settings-box" id="ace-settings-box">
                <div>
                    <div class="pull-left">
                        <select id="skin-colorpicker" class="hide">
                            <option data-skin="default" value="#438EB9">#438EB9</option>
                            <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                            <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                            <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                        </select>
                    </div>
                    <span>&nbsp; Choose Skin</span>
                </div>

                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
                    <label class="lbl" for="ace-settings-navbar">Fixed Navbar</label>
                </div>

                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
                    <label class="lbl" for="ace-settings-sidebar">Fixed Sidebar</label>
                </div>

                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
                    <label class="lbl" for="ace-settings-breadcrumbs">Fixed Breadcrumbs</label>
                </div>

                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
                    <label class="lbl" for="ace-settings-rtl">Right To Left (rtl)</label>
                </div>

                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
                    <label class="lbl" for="ace-settings-add-container">
                        Inside
						<b>.container</b>
                    </label>
                </div>
            </div>
        </div>
        <!-- /#ace-settings-container -->
    </div>
    <!-- /.main-container-inner -->

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="icon-double-angle-up icon-only bigger-110"></i>
    </a>
</div>
<!-- /.main-container -->

@section cssPagePlugin {
    @RenderSection("cssPagePlugin", false)    
}
@section styles {
    @RenderSection("styles", required: false)
}

@section jsPagePlugin {
    @RenderSection("jsPagePlugin", false)
    <!-- knockout -->
    @AssetsHelper.RenderJS(paths: "knockout")
}
@section scripts {
    @RenderSection("scripts", required: false)
    <script type="text/javascript">
        var $$ = {};
        $$.page = { apisite: '//localhost:36411/' };
        $$.page.location = { pathname: function () { } };
        $$.page.location.isMatch = function ( pathname ) {
            return location.pathname.indexOf( pathname ) == 0
                || ( location.pathname + '/' ).indexOf( pathname ) == 0
                || ( location.pathname + 'index' ).indexOf( pathname ) == 0
                || ( location.pathname + '/index' ).indexOf( pathname ) == 0
                || ( location.pathname + 'index/' ).indexOf( pathname ) == 0
                || ( location.pathname + '/index/' ).indexOf( pathname ) == 0;
        }

        $.ajax( {
            url: $$.page.apisite + 'api/domain/Admin',
            type: 'GET',
            async: false
        } ).then( function ( domain ) {
            var _sort = function ( pages ) {
                pages.sort( function ( x, y ) {
                    return x.order - y.order;
                } );
                pages.forEach( function ( page ) {
                    _sort( page.pages );
                } );
            };
            _sort( domain.pages );
            ko.Application.prototype.sitemaplist = ko.observableArray( domain.pages );
        } );

        ko.applyBindings( new ko.Application() );
    </script>
    <script type="text/javascript">
        /* 生成并定位导航信息 */
        $( window ).load( function () {
            $( 'div#sidebar.sidebar' )
                .find( 'li.active' )
                .parentsUntil( 'ul.nav.nav-list', 'li' ).addClass( 'active open' );

            var _hasPositioned = false;
            var _find = function ( page ) {
                if ( $$.page.location.isMatch( page.location ) ) {
                    $( '#breadcrumbs.breadcrumbs > ul.breadcrumb' ).
                            append( '<li class="active">' + page.title + '</li>' );
                    _hasPositioned = true;
                    return;
                }
                
                if ( !_hasPositioned ) {
                    page.pages.forEach( function ( page ) {
                        _find( page );
                    } );
                    if ( _hasPositioned ) {
                        $( '#breadcrumbs.breadcrumbs > ul.breadcrumb > li.active' ).
                            before( '<li><a href="' + page.location + '">' + page.title + '</a></li>' );
                        return;
                    }
                }
            }
            ko.controller.sitemaplist().forEach( function ( page ) {
                _find( page );
            } );
        } );
    </script>
}